<template>
	<view class="Bole">
		<view class="header">
			<image class="h-img" :src="comm_img_url+'/pro/bl-header.png'" mode=""></image>
			<image class="h-btn" @click="getDate()" :src="comm_img_url+'/pro/bole-btn.png'" mode=""></image>
			<view class="flex-box head">
				<view class="left">冻结魅力值：{{memberInfor.points_frozen==null?0:memberInfor.points_frozen}}</view>
				<view class="right">可用魅力值：{{points}}</view>
			</view>
		</view>
		<view class="content">


			<view class="desc">
				<view class="bt">伯乐奖要求</view>
				<view class="info">
					1、当您成为“导师”后即可领取“伯乐奖”，未达成之前产生的奖励将处于冻结状态。
					<br>
					2、达成“导师”之后产生的奖励会自动到账无需手动领取。
					(注：未达标前产生的伯乐奖将累计在奖池内。)
				</view>
			</view>
			<view class="list">

				<view class="title" :style="{backgroundImage:`url(${titleBg})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat'}">伯乐奖明细</view>
        <u-empty mode="data" marginTop="100" text="暂无数据" v-if="list.length === 0"></u-empty>
        <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" v-else>

				 <view class="li flex-box" v-for="(item,key) in list">
					<view class="left1">
						<view class="bd">{{item.descr}}</view>
						<view class="des">{{item.create_time}}</view>
					</view>
					<view class="left2 a1 ">+{{item.num}}</view>
				</view>
        </mescroll-body>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	import titleBg from "@/static/bt-bg2.png"
 import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
    mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				comm_img_url:'',
				titleBg,
				page:1,
				totalPage:1,
				memberInfor:{},
				points:'',
        mescroll:null,
        list:[]
			};
		},

		onLoad(options) {
			this.points = options.bole
			this.comm_img_url = this.$c.appImg
			console.log(options,'options')
			//动态修改状态栏的颜色
			uni.setNavigationBarColor({
				frontColor:"#ffffff",
				backgroundColor:"#ae87d8"
			})
			// this.getfrozenRecord()?
		},
		onShow() {
			if(this.hasLogin){
				this.getMemberIndex()
			}
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		onReachBottom() {
		  let _this = this
		  if (this.page < this.totalPage) {
		    this.status = 'loading';
		    this.page++
		    setTimeout(() => {
		      _this.getfrozenRecord()
		    }, 1000)
		  } else {
		    this.status = 'nomore';
		  }
		},
		methods:{
      upCallback(page) {
        console.log(page,'111')
        //联网加载数据
        let _this = this
        // this.goodsList.length > 0 && (this.showLoading = true)

        this.$u.api.frozenRecord({page:this.page}).then(res => {
          this.mescroll.endByPage(20, res.msg.totalPage);
          if(res.status){
            this.totalPage = res.msg.totalPage
            if(this.page == 1){
              this.list = res.msg.list
            }else{
              this.list = this.list.concat(res.msg.list)
            }
          }
        }).catch(err => {
          console.log(err);
          // (this.showLoading = false)
        })
        /* this.$u.api.goodsGoods({page:page.num,id:0,keyword:this.keyword}).then(res=>{
           console.log(res,'商品列表')
           //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
           //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
           //方法一(推荐): 后台接口有返回列表的总页数 totalPage
           this.mescroll.endByPage(_this.pageSize, res.msg.totalPage); //必传参数(当前页的数据个数, 总页数)
           //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
           //this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)

           //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
           // this.mescroll.endSuccess(res.msg.length, false); //必传参数(当前页的数据个数, 是否有下一页true/false)

           //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
           // this.mescroll.endSuccess(res.list.length);
           if(page.num == 1){_this.goodsList = []}else{} //如果是第一页需手动制空列表
           this.goodsList=this.goodsList.concat(res.msg.list); //追加新数据
           (this.showLoading = false)
         }).catch(()=>{
           //联网失败, 结束加载
           this.mescroll.endErr();
           (this.showLoading = false)
         })*/
      },

			getMemberIndex(){
				this.$u.api.memberIndex().then(res => {
					console.log(res,8888888)
						if (res.status) {
							this.memberInfor = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			//领取
			getDate(){
				this.$u.api.frozenTrransfer().then(res => {
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
				.catch(err => {
					console.log(err);
				})
			},
			// 记录
			getfrozenRecord(){
				this.$u.api.frozenRecord({page:this.page}).then(res => {
						if(res.status){
							 this.totalPage = res.msg.totalPage
							 if(this.page == 1){
							   this.list = res.msg.list
							 }else{
							   this.list = this.list.concat(res.msg.list)
							 }
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
		}
	}
</script>

<style lang="scss">
	page{
		background:#a48efa;
		.list{
			background:#fff;
			width:690rpx;
			min-height:650rpx;
			border-radius: 10rpx;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			.title{
				width:690rpx;
				height:82rpx;
				line-height:82rpx;
				font-size:34rpx;
				// font-weight: bold;
				color:#fff;
				text-align: center;
			}
			.li{
				color:#000;
				justify-content: space-between;
				padding:20rpx 30rpx ;
				border-bottom:1rpx solid #eee;
				
				.left1{
					.bd{
						margin-bottom:10rpx;
					}
					.des{
						font-size:24rpx;
						color:#888888;
					}
				}
				.left2{
					color:#ff3d3d;
				}
				.a1{
					color:#ae87d8;
				}
			}
			.li:last-child{
				border:none;
			}
		}
		.header{
			position:relative;
			.head{
				position: absolute;
				width:690rpx;
				left:30rpx;
				background: rgba(0,0,0,0.3);
				color:#fff;
				padding:10rpx 20rpx;
				border-radius: 20rpx;
				justify-content: space-between;
				bottom:100rpx;
			}
			.h-img{
				width:750rpx;
				height:1000rpx;
			}
			.h-btn{
				position:absolute;
				bottom:-30rpx;
				height:113rpx;
				width:375rpx;
				left:50%;
				transform: translateX(-50%);
			}
		}
		.content{
			padding:30rpx;
			color:#fff;
			margin-top:20rpx;
			
			.desc{
				margin-bottom:30rpx;
				.bt{
					font-size:32rpx;
					margin-bottom:10rpx;
				}
				.info{
					font-size:26rpx;
					line-height:1.6;
				}
			}
		}
	}
</style>
